<style lang="scss" scoped="">
  .chatter{
      display: flex;
      flex-direction:column;
      height: 100%;
      background-color: white;
  }
  .conv_content{
    height:40px;
    flex:100;
    overflow-y: auto;

  }
  .conv{
    display: flex;
    position: relative;
  }
  .input{
    border-top: 1px solid gainsboro;
    height:170px;
    width: 100%;
    position: relative;
    padding:20px;
    textarea{
      overflow-y:  auto;
      resize: none;
      width:100%;
      font-size: 13px;
      padding:5px;
      border:1px solid gainsboro;
    };
    textarea:focus {
      box-shadow: 2px 2px 3px rgba(167,255,235,0.4),
      -2px -2px 3px rgba(167,255,235,0.4);

    };
    button{
      margin-top:12px;
      font-size: 14px;
      width: 80px;
      float: right;
      height: 30px;
      background-color:#4EA0FE;
      color:white;
      border:none;
    }
  }
  .recommend{
    position: absolute;
    width: calc(100% - 40px);

    background-color: white;
    bottom: 150px;
    border:solid 1px gainsboro;
    z-index: 2000;
    &.noact{
      border:none;
    };
    div{
      height: 30px;
      line-height: 30px;
      padding-left: 10px;
      width: 100%;
      font-size: 13px;

    };
    div:hover{
      color:white;
      background-color: cornflowerblue;
      cursor: pointer;
    }
  }
</style>
<template>
  <div class="chatter">
    <div class="conv_content" id="conv_content">
      <template v-for="(item,index) in conv_list">
        <conv :obj="item.obj" :content="item.content" :type="item.type" @goGuess="goGuess"> </conv>
      </template>

    </div>
    <div class="input">
      <div class="recommend" :class="{noact:guess_match_list.length==0}">
        <template v-for="(item,index) in guess_match_list">
           <div @click="goGuess(item);guess_match_list=[];input=''">{{item.content}}</div>
        </template>

      </div>
      <textarea id="input" rows="3"  v-model="input" placeholder="请详细描述您的问题进行提问, 按下shift+enter进行换行哦！"></textarea>
      <button @click="send()">发 送</button>
    </div>

  </div>

</template>

<script>
  import {io} from "../plugins/socket.io"
  import conv from "./conv"

  var socket="";

  export default {
    name: 'chatter',
    components:{
      conv
    },
    data() {
      return {
        input:"",
        conv_list:[
          {
            obj:"other",
            content:"Hi，很高兴跟你做朋友，以后请多多指教！ 请一句话描述您的问题，我们来帮您解决问题。（例如：集中化大数据PaaS平台是什么？）"
          }

        ],
        guess_match_list:[

        ]
      }
    },

    methods: {
      send(){
        let send_content=this.input;
        if(send_content.length<1){
          return
        }
        this.conv_list.push({
          obj:'me',
          content:send_content
        });
        socket.emit("chatter_for_response",{"content":send_content})
        this.input="";
      },

      getResponse(data){
       
        var content=data.content
        if(data.type=="guess"){
          content=eval(content)
        }
        if(data.type=="appendix"){
          content=eval(content)
        }
        this.conv_list.push({
          obj:'other',
          type:data.type,
          content:content
        });
      },

      goGuess({content,k_id}){
        console.log({content,k_id})
        this.conv_list.push({
          obj:'me',
          content:content
        });

        socket.emit("chatter_get_guess",{"node_id":k_id})
      },


    },
    watch:{
      conv_list:function(new_v,old_v){
        var ele = document.getElementById('conv_content');
        this.$nextTick(() => {
          ele.scrollTop = ele.scrollHeight;
        });
//        setTimeout(function(){
//          ele.scrollTop = ele.scrollHeight;
//        },500);

      },
      input:function(new_v,old_v){
        if(new_v.length%2==0&&new_v.length!=0){
            console.log("chatter_match_guess emit")
          socket.emit('chatter_match_guess',{'content':new_v});
        }else if(new_v.length==0){
          this.guess_match_list=[]
        }

      },
    },
    mounted() {
      var that=this;
      document.getElementById('input').addEventListener('keydown',function(e){

        if(e.keyCode!=13&&e.shiftKey) {

          return
        }else if(e.keyCode==13&&!e.shiftKey){
          e.preventDefault();
          that.send()
          return
        }


      });

        /////////////////////////////////
      console.log('this.CONFIG.chatter_socket_url',this.CONFIG.chatter_socket_url)
      socket = io(this.CONFIG.chatter_socket_url);
       
      socket.on('reconnect_attempt', (attempt ) => {
        if(attempt >3){//重连次数超过三，则断开连接
          socket.close()
        }
      });
      socket.on('connect', (data) => {
//        socket.emit('request_for_response',{'param':'value'});
      });

      socket.on('chatter_response',(data) =>{

        that.getResponse(data)
      });
      socket.on('chatter_match_guess',(data) =>{
        this.guess_match_list=eval(data["content"])

      });
    },
    beforeDestroy(){
      socket.close()
    }

  }
</script>
